<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>WhiteCat</title>
    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{/css/global.css}" rel="stylesheet" />
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" />
    <link th:href="@{/css/index.css}" rel="stylesheet" />
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <link th:href="@{/css/me.css}" rel="stylesheet" />
</head>

<body>
<div th:insert="~{commons/commons.html :: top}"></div>

<div class="blog-user"></div>

<div class="blog-body">
    <div class="blog-container">
        <div class="blog-main">

            <div class="home-tips shadow"></div>

            <div class="blog-main-left animated slideInLeft">
                <div class="flow-default" id="parentArticleList">
                    <!--帖子-->
                    <div class="article shadow animated zoomIn" th:each="topic:${topicList}" th:if="${session.otherMessage} == 'topic'">
                        <div class="article-left">
                            <img th:src="@{/images/topicPicture/} + ${topic.topicPicture}" alt="${topic.title}">
                        </div>
                        <div class="article-right">
                            <div class="article-title">
                                <span class="article_is_top" th:if="${topic.topicType == 0}">原创</span>&nbsp;
                                <span class="article_is_yc" th:if="${topic.topicType == 1}">搬运</span>&nbsp;
                                <a th:href="@{/detail/} + ${topic.id}" th:text="${topic.title}"></a>
                            </div>
                            <div class="article-abstract">
                                <a th:href="@{/detail/} + ${topic.id}" th:text="${topic.content.substring(0, 30)}"></a>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="article-footer">
                            <span><i class="fa fa-clock-o" th:text="${#dates.format(topic.topicTime, 'yy-MM-dd hh-mm')}"></i>&nbsp;&nbsp;</span>
                            <span class="article-author" th:text="${topic.getUser().getUsername()}"><i class="fa fa-user"></i>&nbsp;&nbsp;</span>
                            <button th:onclick="support([[${topic.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseTopicMap[topic.id] == 1}">
                                <i class="fa fa-thumbs-o-up"  style="color: deeppink" th:text=" ${topic.getSupportCount()}"></i>&nbsp;&nbsp;
                            </button>
                            <button th:onclick="support([[${topic.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseTopicMap[topic.id] == null || appraiseTopicMap[topic.id] == 0}">
                                <i class="fa fa-thumbs-o-up"   style="color: cornflowerblue" th:text=" ${topic.getSupportCount()}"></i>&nbsp;&nbsp;
                            </button>
                            <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a th:href="@{/category/} + ${topic.topicTagId}" th:text="${topic.tagName}"></a></span>
                            <span class="article-viewinfo"><i class="fa fa-eye" th:text="${topic.getBrowseCount()}"></i>&nbsp;</span>
                            <span class="article-viewinfo"><i class="fa fa-commenting" th:text="${topic.commentCount}"></i>&nbsp;</span>
                        </div>
                    </div>
                    <!--粉丝-->
                    <div class="blog-module shadow animated fadeInRight fadeInUp" th:if="${session.otherMessage} == 'fans'">
                        <div class="blog-module-title"><i class="layui-icon"></i>&nbsp;我的粉丝</div>
                        <ul class="hotusers-list">
                            <li class="hotusers-list-item" th:each="user:${fansList}">
                                <div class="hotusers-avator">
                                    <!--头像-->
                                    <a th:href="@{/toOtherPersonal/} + ${user.id}"><img th:src="@{/images/avatar/} + ${user.avatar}" width="45" height="45"></a>
                                </div>
                                <div>
                                    <a th:href="@{/toOtherPersonal/} + ${user.id}"><div class="hotusers-nick" th:text="${user.username}"></div></a>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                        </ul>
                    </div>
                    <!--关注-->
                    <div class="blog-module shadow animated fadeInRight fadeInUp" th:if="${session.otherMessage} == 'follow'">
                        <div class="blog-module-title"><i class="layui-icon"></i>&nbsp;我的关注</div>
                        <ul class="hotusers-list">
                            <li class="hotusers-list-item" th:each="user:${followList}">
                                <div class="hotusers-avator">
                                    <!--头像-->
                                    <a th:href="@{/toOtherPersonal/} + ${user.id}"><img th:src="@{/images/avatar/} + ${user.avatar}" width="45" height="45"></a>
                                </div>
                                <div>
                                    <a th:href="@{/toOtherPersonal/} + ${user.id}"><div class="hotusers-nick" th:text="${user.username}"></div></a>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                        </ul>
                    </div>
                    <!--分页-->
                    <div class="layui-flow-more " style="background: white">
                        <div class="page">
                            <div>
                                <a class="prev" th:href="@{/otherPersonal/lastPage}">上一页</a>
                                <a class="num" th:href="@{/otherPersonal/toWhichPage/} + ${cutPage.lastPage}" th:text="${cutPage.lastPage}" th:if="${cutPage.lastPage!=0}"></a>
                                <span class="current" style="color: mediumseagreen" th:text="${cutPage.nowPage}"></span>
                                <a class="num" th:href="@{/otherPersonal/toWhichPage/} + ${cutPage.nextPage}" th:text="${cutPage.nextPage}" th:if="${cutPage.nowPage != cutPage.getPageCount()}"></a>
                                <a class="next" th:href="@{/otherPersonal/nextPage}">下一页</a>
                                <a class="num" href="" th:text="共 + ${cutPage.pageCount} + 页"></a>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" id="pageCount" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')" placeholder="页数" autocomplete="off" class="layui-input" style="width: 50px">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" onclick="toWhichPage()"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                                <a class="num" th:text="共 + ${cutPage.totalCount} + 条"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="blog-main-right">
                <!--主头像 不放在主页，放在空间里-->
                <div class="blogerinfo shadow animated fadeInRight">
                    <div class="blogerinfo-figure">
                        <img th:src="@{/images/avatar/} + ${session.user.avatar}" alt="头像">
                    </div>
                    <p class="blogerinfo-nickname" th:text="${session.user.username}"></p>
                    <div class="blogerinfo-introduce" th:utext="文章数 + ':' + ${session.user.topicCount} + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + 获赞数 + ':' + ${session.user.supportCount} + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + 浏览量 + ':' + ${session.user.browseCount}"> </div>
                    <a th:href="@{toOtherPersonalPrivate/topic}">&nbsp;&nbsp;<i class="fa fa-location-arrow"></i>&nbsp;<span>他的文章</span></a>
                    <button style="border-style:none; background-color: white" onclick="toOtherPersonalPrivate(1)" th:href="@{toOtherPersonalPrivate/follow}">&nbsp;&nbsp;<i class="fa fa-location-arrow"></i>&nbsp;<span>他的关注</span></button>
                    <button style="border-style:none; background-color: white" onclick="toOtherPersonalPrivate(2)" th:href="@{toOtherPersonalPrivate/fans}">&nbsp;&nbsp;<i class="fa fa-location-arrow"></i>&nbsp;<span>他的粉丝</span></button>
                    <hr>
                    <div class="blogerinfo-contact">
                        <a class="blogerinfo-location" th:href="@{/chat/} + ${session.user.id}"><i class="fa fa-location-arrow"></i>&nbsp;<span>私信</span></a>
                        <a class="blogerinfo-location" th:href="@{/beFans/} + ${session.user.id}" th:if="${session.ifFans == false}"><i class="fa fa-location-arrow"></i>&nbsp;<span>关注</span></a>
                        <a class="blogerinfo-location" th:href="@{/everBeFans/} + ${session.user.id}" th:if="${session.ifFans == true}"><i class="fa fa-location-arrow"></i>&nbsp;<span>取消关注</span></a >
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<!--页脚-->
<div th:insert="~{commons/commons.html :: down}"></div>

<div class="blog-mask animated layui-hide"></div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/index.js}"></script>

<script th:inline="javascript">
    function support(topicId){
        $.get({
            url: "/chen/topic/supportOrCriticism/" + topicId,
            success: function (data){
                if (data === "error"){
                    layer.msg("请先登录！")
                } else {
                    location.href = "/chen/otherPersonal/toWhichPage/" + [[${cutPage.nowPage}]];
                }
            },
            error: function (){
                alert("失败")
            }
        })
    }

    function toWhichPage() {
        let pageCount = $("#pageCount").val();
        if (pageCount === ""){
            layer.msg("不能为空!")
        }else if(pageCount > [[${cutPage.pageCount}]] || pageCount <= 0){
            layer.msg("无此页！")
        }
        else {
            window.location.href="/chen/otherPersonal/toWhichPage/" + $("#pageCount").val()
        }
    }

    function toOtherPersonalPrivate(x){
        let secret = [[${session.user.secret}]]
        if (secret){
            layer.msg("该用户设置了隐私不可见!")
        } else {
            if (x === 1){
                window.location.href="/chen/toOtherPersonalPrivate/follow/"
            }
            if(x === 2){
                window.location.href="/chen/toOtherPersonalPrivate/fans/"
            }
        }
    }
</script>
</body>

</html>